<template>
    <el-dialog
        v-model="model.visible"
        width="30%"
        :close-on-click-modal="false"
        :append-to-body="true"
        :draggable="true"
        @close="closeModal()"
        @open="openModal()"
    >
        <template #title>
            <span>
                {{model.title}}
            </span>
        </template>
        <el-form :model="model.modalData">
            <el-form-item label="姓名">
                <el-input v-model="model.modalData.name" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="日期">
                <el-input v-model="model.modalData.date" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="地址">
                <el-input v-model="model.modalData.address" autocomplete="off"></el-input>
            </el-form-item>
        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="model.hide()">关闭</el-button>
                <el-button type="primary" @click="saveForm()">保存</el-button>
            </span>
        </template>
    </el-dialog>
</template>


<script lang="ts" >
    import { ref, onMounted, reactive, defineComponent } from 'vue';
    import AdminModal from '../../../types/AdminModal';

    export default defineComponent({
       props: {
           model: {
               type: AdminModal
           }
       },

       mounted() {
           console.log('editFormModal mounted');
       },

       setup(props, context) {
            const closeModal = () => {
                console.log('--closeEditFormModal');
                props.model?.hide();
            }

            const openModal = () => {
                console.log('---openEditFormModal');
            }

            const saveForm = () => {
                console.log('11122');
                console.log(props.model?.modalData);
            }

            const model: any = props.model;
            return {
                closeModal, openModal, saveForm, model
            };
       }
   })

</script>